

import * as THREE from 'three';
import { Switch } from "antd";
import IElement from 'components/Three/interface/IElement';
// import styles from './index.module.less';
import Controller from 'Controller'
import React from "react";

export default function AuxiliaryLineItem() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const scene = threeController.useMemo(s => s.scene, []);

    const element: IElement<THREE.AmbientLight> | undefined = React.useMemo(() => selectedElementUuid ? elementMap.get(selectedElementUuid) : undefined, [elementMap, selectedElementUuid])

    /** 灯光辅助 */
    const getSpotLightHelper = React.useCallback(() => {
        if (!element || !scene) return undefined;
        return scene.children.filter(e => {
            return e instanceof THREE.SpotLightHelper && e.light === element.object3D
        })[0];
    }, [element, scene]);

    const onChange = React.useCallback((e: boolean) => {
        if (!element || !scene) return;
        if (e) {
            scene.add(new THREE.SpotLightHelper(element.object3D));
            threeController.pipeline()();
        } else {
            const spotLightHelper = getSpotLightHelper();
            spotLightHelper && scene.remove(spotLightHelper);
            threeController.pipeline()();
        }
    }, [element, getSpotLightHelper, scene, threeController])

    if (!element) return <></>;

    return (
        <Switch
            size="small"
            checked={!!getSpotLightHelper()}
            onChange={onChange}
        />
    )
}
